import {Component, Input, OnInit} from '@angular/core';
import {FetchService} from "../../../../core/net/fetch.service";
import {NzFormatEmitEvent} from "ng-zorro-antd";
import * as moment from "moment";
import * as _ from "lodash";

@Component({
  selector: 'app-agri-drainage-multi',
  templateUrl: './agri-drainage-multi.component.html',
  styleUrls: ['./agri-drainage-multi.component.scss', '../agriculture.component.scss']
})
export class AgriDrainageMultiComponent implements OnInit {
    listData = [];
    defaultKeys = [];
    ditchIds = [];
    tableData = [];
    baseOpt: any = {
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "cross",
                animation: false,
                label: {
                    backgroundColor: "#505765"
                }
            }
        },
        legend: {
            data: [],
            bottom: 10
        },
        xAxis: {
            type: "category",
            data: []
        },
        yAxis: [
            {
                name: "流量(m³/s)",
                type: "value"
            }
        ],
        series: [
            {
                name: "",
                type: "line",
                smooth: true,
                data: []
            }
        ]
    };
    inletOptChange: any = {};
    inletTableData = [];
    inletTableHead = [];
    @Input()
    get dateModal() {
        // this.queryInfo();
        return this._dateModal;
    }

    set dateModal(val) {
        this._dateModal = val;
        if (this.ditchIds.length) {
            this.queryInfo();
        }
    }
    // tslint:disable-next-line:variable-name
    _dateModal = [new Date(), new Date()];

    constructor(private fetchService: FetchService) {
    }

    ngOnInit() {
        this.fetchService.get<any>('report/drainage/listAllSite', {}).subscribe(res => {
            this.listData = res;
            this.listData.forEach(node => {
                node['selectable'] = false;
            });
            this.defaultKeys = [this.listData[0].children[0].key];
            this.ditchIds = this.defaultKeys;
            this.queryInfo();
        });
    }

    selectedAreaChanged(event: NzFormatEmitEvent): void {
        console.log(event);
        this.ditchIds = [];
        event.checkedKeys.forEach(item => {
            if (!item.isLeaf) {
                item.children.forEach(node => {
                    this.ditchIds.push(node.key);
                });
            } else {
                this.ditchIds.push(item.key);
            }
        });
        this.queryInfo();
    }

    queryInfo(): void {
        const params = {
            ditchIds: this.ditchIds,
            startDate: moment(this.dateModal[0]).valueOf(),
            endDate: moment(this.dateModal[1]).valueOf()
        };
        this.fetchService.post('report/drainage/datas', params).subscribe(res => {
            if (res && Array.isArray(res)) {
                res.forEach(item => {
                    if (item.maxTime) {
                        item.maxTime = moment(item.maxTime).format('YYYY-MM-DD');
                    }
                    if (item.minTime) {
                        item.minTime = moment(item.minTime).format('YYYY-MM-DD');
                    }
                });
                this.tableData = res;
                this.inletOptChange = {
                    legend: {
                        data: res.map(o => {
                            return o.name;
                        })
                    },
                    xAxis: {
                        data: res[0].data.map(o => {
                            return moment(o.meaTime).format('YYYY-MM-DD');
                        })
                    },
                    series: res.map(o => {
                        return {
                            name: o.name,
                            type: "line",
                            data: o.data.map(item => {
                                return item.flux;
                            })
                        };
                    })
                };

                this.inletTableHead = res.map(o => {
                    return o.name;
                });

                const inletData = res[0].data.map(o => {
                    return {
                        date: moment(o.meaTime).format('YYYY-MM-DD'),
                        time: o.meaTime
                    };
                });

                this.inletTableHead.forEach(key => {
                    inletData.forEach(item => {
                        const nameObj = _.find(res, obj => {
                            return obj.name === key;
                        });
                        item[key] = _.find(nameObj.data, o => {
                            return o.meaTime === item.time;
                        }).flux;
                    });
                });

                this.inletTableData = inletData;

            }
        });
    }
}
